<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>PayFinished</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="css/zxy/headAndFoot.css" />
	<link rel="stylesheet" type="text/css" href="css/zxy/payFinished/payFinished.css" />
	<link rel="stylesheet" type="text/css" href="css/zxy/orderConfirm/orderConfirm.css" />
	<script src="lib/jquery-3.3.1.min.js"></script>
	<script src="lib/bootstrap.min.js"></script>
	<script src="lib/vue.js"></script>
	<script src="js/zxy/headAndFoot/headAndFoot.js"></script>
	<script src="js/zxy/orderConfirm/orderConfirm.js"></script>
</head>

<body>
	<div id="all">
		<div id="topAdv"><a href="#"><img src="img/zxy/headAndFoot/topAdv.jpg"></a><div onClick="closeAdv()" id="closeAdv">X</div></div>
		<div id="head">
			<div id="headBox">
				<div id="headTop">
					<ul id="topLeft">
						<li class="topLeftLi"><a href="#">首页</a></li>
						<li class="topLeftLi"><a href="#">华为官网</a></li>
						<li class="topLeftLi"><a href="#">荣耀官网</a></li>
						<li class="topLeftLi"><a href="#">花粉俱乐部</a></li>
						<li class="topLeftLi"><a href="#">帮助中心</a></li>
						<li class="topLeftLi"><a href="#">V 码 (优购码)</a></li>
						<li class="topLeftLi"><a href="#">首企业购页</a></li>
						<li class="topLeftLi"><a href="#">Select Region</a></li>
						<li class="topLeftLi" id="qrcode"><a href="#">下载 APP<span class="caret"></span></a>
							<div >
								<img src="img/zxy/headAndFoot/qrcode.png"/>
								<p>扫一扫，下载客户端</p>
							</div>
						</li>
						<li class="topLeftLi" id="more"><a href="#">更多精彩<span class="caret"></span></a>
							<ul >
								<div><a href="#">EMUI</a></div>
								<div><a href="#">应用市场</a></div>
								<div><a href="#">华为终端云空间</a></div>
								<div><a href="#">开发者联盟</a></div>
							</ul>
					   </li>
					</ul>
					<ul id="topRight">
						<li class="topRightLi">
							<div id="loged" v-if="ifLogin">
								<a href="#">userName</a>
								<div id="userDrop">
									<div id="userInfo">
										<div id="userLeft">
											<a href="#"><img src="img/zxy/headAndFoot/img_logged_in.png" width="90px" height="90px"/></a>
										</div>
										<div id="userRight">
											<p><a>userName</a></p>
											<a href="#" class="realName"><span></span>未实名</a>
											<a href="#" class="i-mail"><span></span>站内信</a>
										</div>
									</div>
									<div id="userOrder">
										我的订单
										<a href="#">更多 ></a>
									</div>
									<div id="orderList">
										<ul>
											<li><a href="#">待支付</a></li>
											<li><a href="#">待收货</a></li>
											<li><a href="#">待评价</a></li>
											<li><a href="#">退换货</a></li>
											<li><a href="#">旧机回收</a></li>
										</ul>
									</div>
									<div id="otherInfo">
										<div class="discount">
											<a href="#"><span class="img01"></span></a>
											<p class="points">积分</p>
											<span>0分</span>
										</div>
										<div class="discount">
											<a href="#"><span class="img02"></span></a>
											<p class="points">优惠券</p>
											<span>0张</span>
										</div>
										<div class="discount">
											<a href="#"><span class="img03"></span></a>
											<p class="points">代金券</p>
											<span>0.00元</span>
										</div>
									</div>
									<div id="logout"><a href="#">退出登录</a></div>
								</div>
							</div>
							<div id="unlogin" v-else>
								<a href="#">请登录</a>
								<a href="#">注册</a>
							</div>
						</li>
						<li class="topRightLi" id="myOrder">
							<a href="#">我的订单</a>
						</li>
						<li class="topRightLi" id="cartShop">
							<a href="#">
								<span class="cartImg"></span>
								购物车(<font id="cartShopNum">0</font>)
							</a>
							<div class="miniCart" id="emptyCart" v-if="ifEmpty">
								<img src="img/zxy/headAndFoot/空购物车.png" width="100px" height="100px"/>
								<p>您的购物车是空的，赶紧选购吧~</p>
							</div>
							<div class="miniCart" id="cartShopBox" v-else>
								<ul class="cartShopBoxUl">
									<li>
										<div class="selectDiv">
											<label class="checkLabel">
												<input type="checkbox" class="checkBtn"/>
												<span></span>
											</label>
										</div>
										<div class="itemImg">
											<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
										</div>
										<div class="itemInfo">
											<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
											<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
										</div>
									</li>
									<li>
										<div class="selectDiv">
											<label class="checkLabel">
												<input type="checkbox" class="checkBtn"/>
												<span></span>
											</label>
										</div>
										<div class="itemImg">
											<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
										</div>
										<div class="itemInfo">
											<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
											<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
										</div>
									</li>
									<li>
										<div class="selectDiv">
											<label class="checkLabel">
												<input type="checkbox" class="checkBtn"/>
												<span></span>
											</label>
										</div>
										<div class="itemImg">
											<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
										</div>
										<div class="itemInfo">
											<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
											<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
										</div>
									</li>
									
								</ul>
								<div id="minicartBalance">
									<p>
										<span>总计:</span>
										<font>¥ 15043.00</font>
									</p>
									<a href="#">立即结算</a>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div id="layOut">
					<div class="left">
						<a href="Main"><img src="img/zxy/cartShop/logo.png"/></a>
						<span>确认订单</span>
					</div>
					<div class="right">111</div>
				</div>
			</div>
		</div>

		<div id="page">
			<div id="pageContent">
				<div id="login-prompt">订单含付款减库存商品，支付完成才会为您预留库存！</div>
				<div id="order-address">
					<p class="h">收货地址</p>
					<div @click="selectAdd(address,$event)" :class="{active:address.isActive==1}" v-for="address in addressList" class="address-main">
						<div class="address-status"><span v-if="address.ifdefault==1">默认地址</span></div>
						<p class="clearfix">
							<span class="address-name">{{address.consignee}}</span>
							<span class="address-tel">{{address.tel}}</span>
						</p>
						<div class="address-detail">
							<span class="province">{{address.province}}</span>
							<span class="city">{{address.city}}</span>
							<span class="district">{{address.district}}</span>
							<span class="street">{{address.street}}</span>
							<span class="detail">{{address.address}}</span>  
						</div>
						<div class="address-option">
							<a class="address-edit">编辑</a>
							<a class="address-del">删除</a>
							<a v-if="address.ifdefault==0" class="address-default">设为默认</a>
						</div>
					</div>
					<div class="address-add">
						<p>新增收货地址</p>
					</div>
				</div>
				<div id="order-detail-area">
					<div id="order-detail">
						<div id="order-list">
							<div v-for="goods in goodsList" class="order-list-detail">
								<div class="p-img">
									<img v-bind:src="goods.goodsImg" width="100px" height="100px" />
								</div>
								<div class="p-name">
									{{goods.name}}
								</div>
								<div class="p-num">x{{goods.goodsNum}}</div>
								<div class="p-price">¥ {{goods.price}}</div>
							</div>
							
							
						</div>
						<div id="order-total-info">
							<p>商品由华为商城选择合作快递下单付款后预计2-3天内发货</p>
						</div>
						<div id="order-total-price">
							<div id="total-price-detail">
								<ul>
									<li>
										<strong>商品总金额：</strong>
										<span>¥{{totalPrice}}</span>
									</li>
									<li>
										<strong>运费：	</strong>
										<span>¥{{postFee}}</span>
									</li>
									<li>
										<strong>优惠金额：</strong>
										<span>-¥{{totleDiscount}}</span>
									</li>
									<li>
										<strong>结算金额：</strong>
										<span>¥{{balancePrice}}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div id="order-submit-area">
					<div id="submit-box">
						<p id="submit-price">应付总额：¥<span>{{balancePrice}}</span></p>
						<p id="submit-points">可获得积分：<span>{{points}}</span></p>
						<div v-if="select.length!=0" id="submit-address">
							<span>配送至:</span>
							<p>{{select[0].province}}  {{select[0].city}} {{select[0].district}} {{select[0].street}} {{select[0].address}} </p>
							<p><span>{{select[0].consignee}}</span><span> {{select[0].tel}}</span></p>
						</div>
						<a id="checkoutSubmit" @click="subOrder">提交订单</a>
					</div>
					
				</div>
			</div>
		</div>

		<div id="foot">
			<div id="footBox">
				<div id="footTop">
					<div>
						<a href="#">
							<span class="slogan1"></span>
							<span>百强企业 品质保证</span>
						</a>
					</div>
					<div>
						<a href="#">
							<span class="slogan2"></span>
							<span>7 天退货 15 天换货</span>
						</a>
					</div>
					<div>
						<a href="#">
							<span class="slogan3"></span>
							<span>48 元起免运费</span>
						</a>
					</div>
					<div>
						<a href="#">
							<span class="slogan4"></span>
							<span>448 家维修网点 全国联保</span>
						</a>
					</div>
				</div>
				<div id="footMid">
					<div class="footList">
						<ul>
							<p>购物相关</p>
							<li>
								<a href="#">购物指南</a>
							</li>
							<li>
								<a href="#">配送方式</a>
							</li>
							<li>
								<a href="#">支付方式</a>
							</li>
							<li>
								<a href="#">常见问题</a>
							</li>
						</ul>
						<ul>
							<p>保修与退换货</p>
							<li>
								<a href="#">保修政策</a>
							</li>
							<li>
								<a href="#">退换货政策</a>
							</li>
							<li>
								<a href="#">退换货流程</a>
							</li>
							<li>
								<a href="#">保修状态查询</a>
							</li>
							<li>
								<a href="#">配件防伪查询</a>
							</li>
						</ul>
						<ul>
							<p>维修与技术支持</p>
							<li>
								<a href="#">售后网点</a>
							</li>
							<li>
								<a href="#">预约维修</a>
							</li>
							<li>
								<a href="#">手机寄修</a>
							</li>
							<li>
								<a href="#">备件价格查询</a>
							</li>
							<li>
								<a href="#">上门服务</a>
							</li>
						</ul>
						<ul>
							<p>关于我们</p>
							<li>
								<a href="#">公司介绍</a>
							</li>
							<li>
								<a href="#">华为商城简介</a>
							</li>
							<li>
								<a href="#">华为线下门店</a>
							</li>
							<li>
								<a href="#">荣耀线下门店</a>
							</li>
							<li>
								<a href="#">诚征英才</a>
							</li>
						</ul>
						<ul>
							<p>关注我们</p>
							<li>
								<a href="#">新浪微博</a>
							</li>
							<li>
								<a href="#">腾讯微博</a>
							</li>
							<li>
								<a href="#">花粉俱乐部</a>
							</li>
						</ul>
						<ul>
							<p>友情链接</p>
							<li>
								<a href="#">华为官网</a>
							</li>
							<li>
								<a href="#">华为商城手机版</a>
							</li>
							<li>
								<a href="#">荣耀官网</a>
							</li>
							<li>
								<a href="#">花粉俱乐部</a>
							</li>
							<li>
								<a href="#">网站地图</a>
							</li>
						</ul>

					</div>
					<div class="serviceTel">
						<p>400-088-6888</p>
						<span>24 小时客服热线（仅收市话费）</span>
						<a>
							<div>
								<font>在线客服</font>
							</div>
						</a>
					</div>
				</div>
				<div id="footBottom">
					<div id="copyright">
						<div id="copyrightLeft"><a href="#"><div></div></a></div>
						<div id="copyrightMid">
							<p><a>隐私声明</a> <a>服务协议</a> Copyright © 2012-2018 华为软件技术有限公司 版权所有 保留一切权利</p>
							<p>公安备案 苏公网安备 32011402010009 号 | 苏 ICP 备 17040376 号 - 6 | 增值电信业务经营许可证：苏 B2-20130048 号 |</p>
						</div>
						<div id="copyrightLogo">
							<a href="#"><img src="img/zxy/headAndFoot/copyright1.jpg"  width="70px" height="24px"/></a>
							<a href="#"><img src="img/zxy/headAndFoot/copyright2.png"  width="70px" height="24px"/></a>
							<a href="#"><img src="img/zxy/headAndFoot/copyright3.png"  width="70px" height="24px" /></a>
							<a href="#"><img src="img/zxy/headAndFoot/copyright4.png"  width="70px" height="24px" /></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
	
	<!--获取隐式对象  -->
	<span 
		data-iflogin="${ifLogin }" 
		data-ifempty="${ifEmpty }" 
		data-userid="${user.userid }" 
		data-usertel="${user.tel }" 
		id="getData" style="display:none">
	</span>
	
	<script>
		//获取request中的购物车商品信息
		var goodsListStr='${requestScope.goodsListStr}';
		console.log("goodsListStr:"+goodsListStr);
		var goodsList=$.parseJSON(goodsListStr);
		console.log(goodsList);
		
		var addStr='${requestScope.addStr}';
		console.log("addStr:"+addStr);
		var addressList=$.parseJSON(addStr);
		console.log(addressList);
		var select=[];
		for(var i=0;i<addressList.length;i++){
			if(addressList[i].ifdefault==1){
				select.push(addressList[i]);
			}
		}
		
		var page=new Vue({
			el:"#page",
			data:{
				goodsList:goodsList,
				addressList:addressList,
				select:select,
				ifselect:false,
			},
			methods:{
				selectAdd:function(address,event){
					this.select = [];
					this.select.push(address);
					//this.select=$.parseJSON(this.select);
					console.log(this.select[0].tel);
					this.addressList.forEach(function (add) {
						add.isActive=0;
					});
					address.isActive=1;
				},
				subOrder:function(){
					if(this.select.length==0){
						alert("请选择收货地址");
						return;
					}
					
					
					//将所有的商品id传入
					var goodsidList=[];
					this.goodsList.forEach(function (goods) {
						goodsidList.push(goods.goodsid+":"+goods.goodsNum);
						//row.push(goods.goodsNum);
					});
					goodsidListStr=goodsidList.toString();
					
					var address=JSON.stringify(this.select[0]);
					$.ajax({
						type:"POST",
						url:"OrderConfirm?method=subOrder",
						data:{
							//addressid:this.select[0].addressid,
							address:address,
							goodsidListStr:goodsidListStr,
							payPrice:this.balancePrice,//实际支付价格
							totalPrice:this.totalPrice,//总价
							postFee:this.postFee,//邮费
						},
						success:function(dataStr){
							console.log(dataStr);
							var data=$.parseJSON(dataStr);
							console.log(data);
							/* var messageStr=JSON.stringify(data.codeMsg);
							messageStr = encodeURI(messageStr); //编码 */
							var addressid=data.codeMsg.addressid;
							var payPrice=data.codeMsg.payPrice;
							var orderid=data.codeMsg.orderid;
							if(data.code==1){
								location.href="Cashier?orderid="+orderid+"&payPrice="+
									payPrice+"&addressid="+addressid;
							}
							else{
								alert("部分商品的库存数量不足，请修改数量："+data.codeMsg);
							}
						},
						error:function(){
							alert("error");
						},
					});
				},
			},
			computed:{
				points:function(){
					return Math.ceil(parseInt(this.balancePrice)/10);
				},
				totalPrice:function(){
					var totalPrice=0;
					this.goodsList.forEach(function (goods) {
						totalPrice+=parseInt(goods.price*goods.goodsNum);
					});
					return totalPrice;
				},
				postFee:function(){
					var postFee=0;
					this.goodsList.forEach(function (goods) {
						if(parseInt(goods.postFee)>postFee){
							postFee=parseInt(goods.postFee);
						}
					});
					return postFee;
				},
				totleDiscount:function(){
					var totleDiscount=0;
					this.goodsList.forEach(function (goods) {
						totleDiscount+=parseInt(goods.discountPrice*goods.goodsNum);
					});
					return totleDiscount;
				},
				balancePrice:function(){
					return this.totalPrice-this.totleDiscount;
				},
			}
		
		});
	</script>
	
	
	
</html>